<template>
  <div class="container">
    <a-card>
      <a-row :gutter="12">
        <a-col :span="5">
          <div class="header">
            <div style="font-size: 20px; font-weight: 800">日历</div>
            <div style="color: #3965fc">
              <span class="icon"></span>
              <span style="font-weight: 600">切换</span>
            </div>
          </div>
          <div class="btn">
            <a-button type="primary" @click="handleAddCal">+ 添加日程</a-button>
          </div>
          <a-calendar v-model="date" :modes="modes"></a-calendar>
          <div class="calHeader">
            <span style="font-weight: 600; font-size: 16px">我的日程</span>
            <span style="font-weight: 600; font-size: 16px">+</span>
          </div>
          <a-timeline>
            <a-timeline-item
              v-for="(item, index) in timeArr"
              :key="index"
              :label="item.label"
            >
              <div class="item">
                <div class="top">
                  <span
                    style="
                      width: 30px;
                      font-size: 12px;
                      font-weight: 600;
                      color: #2476ff;
                    "
                  >
                    课程
                  </span>
                  <span class="name">{{ item.name }}</span>
                  <span class="status">{{ item.status }}</span>
                </div>
                <div class="bottom">
                  <div class="icon"></div>
                  <div class="txt">{{ item.address }}</div>
                </div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-col>
        <a-col :span="19">
          <rightCal
            ref="rightCalRef"
            @handle-cal-details="handleCalDetails"
          ></rightCal>
        </a-col>
      </a-row>
      <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel">
        <a-form
          ref="formRef"
          :size="form.size"
          :model="form"
          :style="{ width: '400px' }"
          @submit="handleSubmit"
        >
          <a-form-item field="date" label="时间">
            <a-date-picker v-model="form.date" placeholder="请选择时间" />
          </a-form-item>
          <a-form-item field="title" label="标题">
            <a-input v-model="form.title" placeholder="请输入日程标题" />
          </a-form-item>
          <a-form-item field="remark" label="备注">
            <a-input v-model="form.remark" placeholder="请输入日程备注" />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button html-type="submit">提交</a-button>
              <a-button @click="$refs.formRef.resetFields()">重置</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import rightCal from "./components/rightCal.vue";
const date = ref(new Date("2023-01-01"));
const modes = ref([]);
const timeArr = ref([]);
const rightCalRef = ref(null);
const visible = ref(false);

const fetchData = () => {
  timeArr.value = [
    {
      content: "网上选课26",
      label: "上午8点",
      name: "哲学（中国哲学史）",
      status: "即将开始>",
      address: "地址：4教309",
    },
    {
      content: "网上选课24",
      label: "上午8点",
      name: "哲学（中国哲学史）",
      status: "即将开始>",
      address: "地址：4教309",
    },
    {
      content: "网上选课26",
      label: "上午8点",
      name: "哲学（中国哲学史）",
      status: "即将开始>",
      address: "地址：4教309",
    },
    {
      content: "网上选课23",
      label: "上午8点",
      name: "哲学（中国哲学史）",
      status: "23小时30分后>",
      address: "地址：4教309",
    },
    {
      content: "网上选课22",
      label: "上午8点",
      name: "哲学（中国哲学史）",
      status: "即将开始>",
      address: "地址：4教309",
    },
  ];
};
const handleAddCal = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
const handleCalDetails = (flag) => {
  visible.value = flag;
};
const handleSubmit = ({ values, errors }) => {
  console.log("values:", values, "\nerrors:", errors);
};
const form = reactive({
  title: "",
  date: "",
  remark: "",
});
onMounted(() => {
  fetchData();
});
</script>

<style lang="less">
.container {
  padding: 30px 20px 20px 20px;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 60px;
    align-items: center;
    .icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      font-weight: 600;
      margin-right: 6px;
      background: url("@/assets/images/切换.png") center center no-repeat;
      background-size: contain;
    }
  }
  .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    .arco-btn {
      border-radius: 10px;
      width: 90%;
    }
    margin-bottom: 10px;
  }
  .calHeader {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 20px;
  }
  .arco-calendar {
    border: 0;
    .arco-calendar-header {
      padding: 24px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        display: none;
      }
      .arco-calendar-header-left {
        display: flex;
        justify-content: center;
        align-self: center;
      }
      .arco-calendar-header-value {
        font-size: 12px;
      }
    }
    .arco-calendar-body {
      .arco-calendar-week-list-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
      }
    }
  }
  .arco-calendar-month-row {
    height: 30px !important;
    .arco-calendar-cell .arco-calendar-date {
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0;
      .arco-calendar-date-value {
        font-size: 14px !important;
      }
    }
    .arco-calendar-cell {
      border: 0 !important;
    }
    .arco-calendar-cell-in-view {
      border: 0 !important;
    }
  }
  .arco-timeline-item {
    min-height: 60px;
  }
  .arco-timeline-item-content {
    height: 50px;
    background: #f4f7ff;
    border: 1px solid #e5eefe;
    border-radius: 4px;

    .item {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .top {
        display: flex;
        flex: 1;
        justify-content: start;
        width: 100%;
        padding: 0 1%;

        .name {
          flex: 5;
          font-size: 12px;
          font-weight: 600;
          color: #333;
        }

        .status {
          flex: 4;
          font-size: 12px;
          color: #ff5d5d !important;
          display: flex;
          justify-content: end;
        }
      }

      .bottom {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: start;
        width: 100%;

        .icon {
          width: 18px;
          height: 18px;
          margin-right: 10px;
          background: url("@/assets/images/地址.png") center center no-repeat;
          background-size: contain;
        }

        .txt {
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
}
</style>
